<script lang="ts" setup>
defineProps<{
  /** 子项 */
  items: Array<{
    /** 子项标签 */
    label: string
    /** 子项值 */
    value: string | number
  }>
}>()

const model = defineModel<string | number>()
</script>

<template>
  <view class="flex flex-wrap -m-8px">
    <template v-for="item in items" :key="item.label">
      <view
        class="m-8px min-w-80px rd-full b-solid px-20px text-center text-24px lh-44px"
        :class="{
          'bg-theme-primary/10 b-2px b-theme-primary text-theme-primary': model === item.value,
          'b-2px b-#e4 text-#6': model !== item.value,
        }"
        @click="model = item.value"
      >{{ item.label }}</view>
    </template>
  </view>
</template>

<style lang="less" scoped></style>
